<template>
  <view class="home">
    <up-form :model="form" labelWidth="fit-content">
      <up-form-item label="小区名称" required borderBottom @click="handlePopup('xiaoqu','xiaoqu_id')">
        <up-input type="text" border="none" input-align="right" readonly v-model="form.xiaoqu_text"
          placeholder="请选择周边小区">
          <template #suffix>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="楼栋号" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.lou_num" placeholder="请输入楼栋号">
        </up-input>
      </up-form-item>
      <up-form-item label="单元门" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.unit_num" placeholder="请输入单元门">
        </up-input>
      </up-form-item>
      <up-form-item label="门牌号" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.house_num" placeholder="请输入门牌号">
        </up-input>
      </up-form-item>
      <up-form-item label="选择户型" required borderBottom @click="handlePopup('house_type','house_type')">
        <up-input type="text" border="none" input-align="right" readonly v-model="form.house_type_text"
          placeholder="选择室卫厅">
          <template #suffix>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="楼层" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.floor" placeholder="请输入">
        </up-input>
      </up-form-item>
      <up-form-item label="总楼层" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.total_floor" placeholder="请输入">
        </up-input>
      </up-form-item>
      <up-form-item label="建筑面积" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.space" placeholder="请输入">
          <template #suffix>
            <u-text text="平米" color="#000"></u-text>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="房源价值点" required borderBottom prop="description">
        <up-input type="text" border="none" input-align="right" v-model="form.description" placeholder="请输入">
        </up-input>
      </up-form-item>
   <!--   <up-form-item label="所属区域" required borderBottom @click="handlePopup('region')">
        <up-input type="text" border="none" input-align="right" readonly v-model="form.address_text" placeholder="请选择">
          <template #suffix>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </template>
        </up-input>
      </up-form-item> -->
      <up-form-item label="装修情况" required borderBottom @click="handlePopup('renovation','renovation')">
        <up-input type="text" border="none" input-align="right" readonly v-model="form.renovation_text"
          placeholder="请选择">
          <template #suffix>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="产权" required borderBottom @click="handlePopup('property','property')">
        <up-input type="text" border="none" input-align="right" readonly v-model="form.property_text" placeholder="请选择">
          <template #suffix>
            <u-icon name="arrow-right" color="#000" size="14"></u-icon>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="房屋年限" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.life" placeholder="请输入">
        </up-input>
      </up-form-item>
      <up-form-item label="房屋朝向" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.toward" placeholder="请输入">
        </up-input>
      </up-form-item>
      <up-form-item label="类型" required borderBottom>
        <view class="u-flex-y-center u-flex-end u-m-l-36">
          <view class="u-flex-y-center" @click.stop="changeRadio('type',1)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.type == 1"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>新房</text>
          </view>
          <view class="u-flex-y-center u-m-l-36" @click.stop="changeRadio('type',2)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.type == 2"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>二手房</text>
          </view>
        </view>
      </up-form-item>
      <up-form-item label="电梯" required borderBottom>
        <view class="u-flex-y-center u-flex-end u-m-l-36">
          <view class="u-flex-y-center" @click.stop="changeRadio('lift',1)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.lift == 1"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>有</text>
          </view>
          <view class="u-flex-y-center u-m-l-36" @click.stop="changeRadio('lift',2)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.lift == 2"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>无</text>
          </view>
        </view>
      </up-form-item>
      <up-form-item label="车库" required borderBottom>
        <view class="u-flex-y-center u-flex-end u-m-l-36">
          <view class="u-flex-y-center" @click.stop="changeRadio('garage',1)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.garage == 1"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>有</text>
          </view>
          <view class="u-flex-y-center u-m-l-36" @click.stop="changeRadio('garage',2)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.garage == 2"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>无</text>
          </view>
        </view>
      </up-form-item>
      <up-form-item label="储间" required borderBottom>
        <view class="u-flex-y-center u-flex-end u-m-l-36">
          <view class="u-flex-y-center" @click.stop="changeRadio('locker',1)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.locker == 1"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>有</text>
          </view>
          <view class="u-flex-y-center u-m-l-36" @click.stop="changeRadio('locker',2)">
            <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.locker == 2"></image>
            <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
            <text>无</text>
          </view>
        </view>
      </up-form-item>
      <up-form-item label="房屋标签" required borderBottom>
        <view class="u-flex-y-center u-flex-end u-m-l-36">
          <up-tag :text="form.house_labels_text" @close="closeLabel" size="mini" closable color="#666" plain
            borderColor="#666" v-if="form.house_labels_text"></up-tag>
          <text style="color: #8e8e8e;" class="u-m-l-16" @click="handlePopup('house_labels','labels')">请选择</text>
        </view>
      </up-form-item>
      <up-form-item label="房屋标题" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.title" placeholder="请输入">
        </up-input>
      </up-form-item>
      <up-form-item label="市场总价" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.market_price" placeholder="请输入">
          <template #suffix>
            <u-text text="万" color="#000"></u-text>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="优惠价" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.price" placeholder="请输入">
          <template #suffix>
            <u-text text="万" color="#000"></u-text>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="单价" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.unit_price" placeholder="请输入元/平方">
        </up-input>
      </up-form-item>
      <up-form-item label="房源实景图片/视频/户型图" labelPosition="top" required borderBottom>
        <view>
          <up-upload width="180rpx" height="180rpx" multiple :fileList="data.fileList" max-count="9"
            @afterRead="afterChange($event,'fileList')" @delete="deletePic($event,'fileList')">
            <image src="@/static/images/01_18hjm.png" mode="widthFix" style="width: 180rpx;height: 180rpx;"></image>
          </up-upload>
          <up-upload width="180rpx" height="180rpx" multiple :fileList="data.videoList" max-count="1"
            @afterRead="afterChange($event,'videoList')" accept="video" @delete="deletePic($event,'videoList')">
            <image src="@/static/images/01_18hjm.png" mode="widthFix" style="width: 180rpx;height: 180rpx;"></image>
          </up-upload>
          <up-upload width="180rpx" height="180rpx" :fileList="data.houseChart" max-count="1" multiple
            @afterRead="afterChange($event,'houseChart')" @delete="deletePic($event,'houseChart')">
            <image src="@/static/images/01_18hjm.png" mode="widthFix" style="width: 180rpx;height: 180rpx;"></image>
          </up-upload>
          <view class="remark">
            123
          </view>
        </view>
      </up-form-item>
      <up-form-item label="联系人" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.real_name" placeholder="请输入联系人">
          <template #suffix>
            <view class="u-flex-y-center u-m-l-36">
              <view class="u-flex-y-center" @click.stop="changeRadio('sex',1)">
                <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.sex == 1"></image>
                <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
                <text>先生</text>
              </view>
              <view class="u-flex-y-center u-m-l-36" @click.stop="changeRadio('sex',2)">
                <image src="@/static/images/01_18mj.png" class="radio-icon" v-if="form.sex == 2"></image>
                <image src="@/static/images/01_18efd.png" class="radio-icon" v-else></image>
                <text>女士</text>
              </view>
            </view>
          </template>
        </up-input>
      </up-form-item>
      <up-form-item label="联系电话" required borderBottom>
        <up-input type="text" border="none" input-align="right" v-model="form.user_phone" placeholder="请输入">
        </up-input>
      </up-form-item>
    </up-form>
    <view class="action-bar">
      <view class="action-text">这里是注意事项</view>
      <up-button type="warning" shape="circle" color="#F87610" :loading="loading" @click="save">添加房源</up-button>
    </view>
  </view>
  <up-picker :show="data.show" :columns="[data.actions]" keyName="name" closeOnClickOverlay @close="handleCancel"
    @cancel="handleCancel" @confirm="handleConfirm"></up-picker>
  <region-item :regionShow="data.regionShow" @update:regionShow="data.regionShow = $event"
    @confirmRegion="confirmRegion"> </region-item>

</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import { house_config, house_create, house_detail, house_update, xiaoqu } from '../../../config/api';
  import { _upload, prefixURL } from '../../../util/util';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })

  const data = ref({
    show: false,
    regionShow: false,
    actions: [],
    house_type: [],
    renovation: [],
    property: [],
    house_labels: [],
    xiaoqu: [],
    key: '',
    key_text: '',
    fileList: [], //实景图片
    videoList: [], // 视频
    houseChart: [], //户型图
  })
  const loading = ref(false)
  const form = ref({})
  onMounted(() => {
    _house_config()
    _xiaoqu()
  })
  // 房源详情
  const _house_detail = () => {
    house_detail({ id: props.id }).then(res => {
      console.log(res)
      form.value = { ...form.value, ...res.data }
      res.data.images.forEach(item => {
        data.value.fileList.push({
          status: 'success',
          message: '',
          url: item,
          thumb: prefixURL(item)
        })
      })
      data.value.houseChart = [{
        status: 'success',
        message: '',
        url: res.data.house_images,
        thumb: prefixURL(res.data.house_images)
      }]
      data.value.videoList = [{
        status: 'success',
        message: '',
        url: res.data.video,
        thumb: prefixURL(res.data.video)
      }]
      form.value.house_labels_text = res.data.labels_text[0]
      form.value.address_text = `${form.value.province}-${form.value.city}-${form.value.district}`
      form.value.xiaoqu_text = form.value.xiaoqu
    })
  }
  if (props.id) {
    uni.setNavigationBarTitle({
      title: '编辑房源'
    })
    _house_detail()
  }
  const save = () => {
    loading.value = true
    let images = []
    let video = []
    let house_images = []
    data.value.fileList.forEach(item => images.push(item.url))
    data.value.houseChart.forEach(item => house_images.push(item.url))
    data.value.videoList.forEach(item => video.push(item.url))
    form.value = {
      ...form.value,
      images: images.join(','),
      video: video.join(','),
      house_images: house_images.join(','),
    }
    if (props.id) {
      _house_update()
    } else {
      _house_create()
    }
  }
  // 编辑房源
  const _house_update = () => {
    house_update(form.value).then(res => {
      uni.$u.toast(res.msg)
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
  // 添加房源
  const _house_create = () => {
    house_create(form.value).then(res => {
      uni.$u.toast(res.msg)
      loading.value = false
    }).catch(() => {
      loading.value = false
    })
  }
  // 关闭标签
  const closeLabel = () => {
    form.value.house_labels_text = ''
    form.value.labels = ''
  }
  // 上传图片和视频
  const afterChange = async (event, key) => {
    console.log(event, key)
    let list = [].concat(event.file)
    let index = data.value[key].length
    list.forEach((item) => {
      data.value[key].push({
        ...item,
        status: 'uploading',
        message: '上传中',
      });
    });
    for (let i = 0; i < list.length; i++) {
      const result = await _upload(list[i].url)
      let item = data.value[key][index];
      data.value[key].splice(index, 1, {
        ...item,
        status: 'success',
        message: '',
        url: result,
      });
      index++
    }
    console.log(data.value[key])
  }
  // 删除图片
  const deletePic = (event, key) => {
    data.value[key].splice(event.index, 1)
  }

  // 选择省市区
  const confirmRegion = (row) => {
    form.value = { ...form.value, ...row }
    form.value.address_text = `${form.value.province_text}-${form.value.city_text}-${form.value.district_text}`
  }
  // 小区
  const _xiaoqu = () => {
    xiaoqu().then(res => {
      data.value.xiaoqu = res.data
    })
  }
  // 房源选项
  const _house_config = () => {
    house_config().then(res => {
      data.value = { ...data.value, ...res.data }
    })
  }
  // 弹框
  const handlePopup = (key_text, key) => {
    if (key_text == 'region') {
      data.value.regionShow = true
      return
    }
    data.value.actions = data.value[key_text]
    data.value.key = key
    data.value.key_text = `${key_text}_text`
    data.value.show = true
  }
  // 下拉选择
  const handleConfirm = (row) => {
    data.value.show = false
    form.value[data.value.key] = row.value[0]?.id || row.value[0]?.value
    form.value[data.value.key_text] = row.value[0].name
  }
  // 关闭
  const handleCancel = () => {
    data.value.show = false
  }
  // 单选框选择
  const changeRadio = (key, val) => {
    form.value[key] = val
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 24rpx;
    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 35rpx 0;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto;
      right: -12rpx;
    }
  }

  .radio-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .remark {
    font-size: 26rpx;
    font-weight: 500;
    color: #8f8f8f;
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;

    .action-text {
      color: #F3440E;
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
  }
</style>